<template>
  <div class="login-head">
    <el-row class="userName demo-avatar demo-basic">
      <el-col :span="12">
        <div class="demo-basic--circle">
          <el-avatar :src="circleUrl"></el-avatar>
        </div>
      </el-col>
    </el-row>
    <el-dropdown>
      <span class="el-dropdown-link">
        {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown" split-button>
        <el-dropdown-item>修改个人信息</el-dropdown-item>
        <el-dropdown-item>
          <span class="logOutBTN" @click="logOut">退出</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "DZineo",
      circleUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      state: false,
    };
  },
  methods: {
    logOut() {
       this.$confirm('您是否要退出?', '退出提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '退出成功!',
          });
          localStorage.removeItem('isLogin');
          this.$router.push('/')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消成功'
          });
        });
    },
  },
};
</script>

<style scoped>
.login-head {
  position: absolute;
  top: 15px;
  right: 30px;
  display: flex;
  cursor: pointer;
}
.userName {
  text-align: center;
  line-height: 46px;
  padding-right: 20px;
}
.el-dropdown {
  line-height: 46px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.logOutBTN{
  display: block;
  width: 100%;
  height: 100%;
}
</style>
